{extend name="mainadmin@layouts/base" /}
{block name="head" }
<style>
  .pop-area{line-height:1;margin-top:-10px;-webkit-user-select:none;width:830px}.
  pop-area .check{margin-right:7px}
  .pop-area-row{border-bottom:1px solid #E8E8E8}
  .pop-area-provinces{margin:10px 0}
  .pop-area-provinces [disabled]{color:#aaa}
  .pop-area-region{position:relative;display:inline-block;width:98px}
  .pop-area-region .ys-hint3-content{left:-20px!important}
  .pop-area-region .ico-help-arrow{left:23px!important}
  .pop-area-region .ico-arrow-1{position:absolute;top:2px;right:15px}
  .pop-area-province{position:relative;display:inline-block;width:98px}
  .pop-area-province-arrow{cursor:pointer;display:inline-block;position:relative;padding:2px}
  .pop-area-province-arrow .ico{top:-2px}
  .pop-area-cities-count{font-size:12px;color:#49d}
  .check-inverse .pop-area-cities-count{color:#D55}
  .pop-area-cities{padding:15px 15px 0;border:1px solid #D8D8D8;border-radius:2px;background-color:#FCFCFC;position:relative;top:1px}
  .pop-area-cities [disabled]{color:#aaa}
  .pop-area-cities-arrow{position:absolute;top:-6px;left:0}
  .pop-area-city{position:relative;display:inline-block;margin:0 20px 10px 0}
  .pop-area-checkbox-warning{position:absolute;top:0;left:0;width:16px;height:16px;background:url(../img/ico.png) -340px -80px}
  .pop-area-checkbox-warning .ico-help{opacity:0}
  .pop-area-province .pop-area-checkbox-warning{top:2px}
.caret-2 {
border-top: none;
border-bottom: 4px solid #000000;
}

</style>

{/block}
{block name="main" }
<header class="header  b-b clearfix">
     <div class="page-breadcrumbs">
            <ul class="breadcrumb" >
                <li>
                    <i class="fa fa-ellipsis-v"></i>
                    <strong>新增运费模板</strong>
                </li>
            </ul>
              <a class="text-muted pull-right fr pointer m-t-md m-r" data-toggle="back" title="返回"><i class="fa fa-reply"></i></a>
        </div>
</header>

<form class="form-horizontal form-validate form_vbox" method="post" action="{:url('info')}">
    <section class="vbox">
        <section class="scrollable  wrapper w-f">

            <section class="panel panel-default">
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">模版名称：</label>
                        <div class="col-sm-3 must">
                            <input type="text" class="form-control" data-rule-required="true" name="sf_name"
                                   value="{$row.sf_name}"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">消费满免邮：</label>
                        <div class="col-sm-4">
                            <input type="text" class="input-mini" data-rule-required="true" data-rule-decimal="2"
                                   name="consume" value="{$row.consume * 1}"/><span class="help-inline">元，等于0则不生效</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">默认模板：</label>
                        <div class="col-sm-10">
                            <label class="checkbox-inline" style="padding-left:0px;"><input value="0" name="is_default"
                                                                                            {$row['is_default']<=0?'checked':'';}
                                type="radio" > 不是</label>
                            <label class="checkbox-inline"><input value="1" name="is_default" type="radio" {$row['is_default']==1?'checked':'';}>
                                是</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">计算方式：</label>
                        <div class="col-sm-10">
                            <label class="checkbox-inline" style="padding-left:0px;"><input value="1" name="valuation"
                                                                                            data-toggle="valuation"
                                                                                            data-type="number"
                                                                                            data-name="件" data-unit="个"
                                                                                            {$row['valuation']<=1?'checked':'';}
                                type="radio" > 计件</label>
                            <label class="checkbox-inline"><input value="2" name="valuation" data-toggle="valuation"
                                                                  data-type="weight" data-name="重" data-unit="KG"
                                                                  type="radio" {$row['valuation']==2?'checked':'';}> 计重</label>
                            <p class="help-inline">多个运模板时，此项要统一设置，否则可能出现计算错误</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">运送方式：</label>
                        <div class="col-sm-10">
                            {volist name="shippingList" id="shipping"}
                            {neq name="shipping.is_zt" value="1"}
                            <label class="checkbox-inline">
                                <input name="delivery[]" type="checkbox" value="{$key}" data-delivery="{$key}"
                                       data-toggle="delivery" data-name="{$shipping.shipping_name}" {$row['sf_info'][$key]?'checked':''}/>{$shipping.shipping_name}
                            </label>
                            {/neq}
                            {/volist}
                        </div>

                    </div>
                    <div class="line line-dashed line-lg pull-in"></div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            运费设置：
                        </label>
                        <div class="col-sm-8" data-toggle="delivery_list">
                            {volist name="row.sf_info" id="rowb"}
                            {assign name="fs_type" value="$key" /}
                            <div style="display: block;" class="panel panel-default" id="delivery_item_{$fs_type}"
                                 data-delivery="{$fs_type}">
                                <header class="panel-heading">{$shippingList[$fs_type]['shipping_name']}运费设置</header>
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th class="col-sm-4">配送区域
                                            </th>
                                            <th>{$row['valuation']==1?'首件(个)':'首重(KG)'}</th>
                                            <th>运费(元)</th>
                                            <th>{$row['valuation']==1?'续件(个)':'续重(KG)'}</th>
                                            <th>运费(元)</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {volist name="rowb" id="rowc"}
                                        <tr>
                                            <td>
                                                {notempty name="rowc.area" }
                                                全国默认地区<input name="{$fs_type}[{$key}][area]" value="all" type="hidden">
                                                {else/}
                                                指定地区 <a href="javascript:;" title="编辑运送区域" class="js_edit_area m-r-xs"
                                                        data-remote="sel_region" data-fun="open_region"
                                                        data-delivery="{$fs_type}" data-index="{$key}"
                                                        data-toggle="divModal"><i class="fa fa-edit text-muted"></i></a><a
                                                    href="javascript:;" title="删除运送区域" data-toggle="removeRow"><i
                                                    class="fa fa-trash-o text-muted"></i></a>
                                                <p class="  js_area_item_{$fs_type}_{$key}"><span class="js_no_area"> {$rowc.region_list}</span>
                                                </p>
                                                <input name="{$fs_type}[{$key}][region_id]"
                                                       class="select_region_{$fs_type}" id="{$fs_type}_{$key}_region_id"
                                                       value="{$rowc.region_id}" type="hidden">
                                                <input name="{$fs_type}[{$key}][region_list]"
                                                       class="select_region_{$fs_type}"
                                                       id="{$fs_type}_{$key}_region_list" value="{$rowc.region_list}"
                                                       type="hidden">
                                                {/notempty}
                                            </td>
                                            <td style="position:relative;">
                                                <input class="form-control" data-rule-required="true" min="1"
                                                       data-rule-decimal="2" name="{$fs_type}[{$key}][start]"
                                                       type="text" value="{$rowc.start}"></td>
                                            <td style="position:relative;">
                                                <input class="form-control" data-rule-required="true"
                                                       data-rule-decimal="2" name="{$fs_type}[{$key}][postage]"
                                                       type="text" value="{$rowc.postage|number_format=2}">
                                            </td>
                                            <td style="position:relative;">
                                                <input class="form-control" data-rule-required="true" min="1"
                                                       data-rule-decimal="2" name="{$fs_type}[{$key}][plus]" type="text"
                                                       value="{$rowc.plus}">
                                            </td>
                                            <td style="position:relative;">
                                                <input class="form-control" data-rule-required="true"
                                                       data-rule-decimal="2" name="{$fs_type}[{$key}][postageplus]"
                                                       type="text" value="{$rowc.postageplus|number_format=2}">
                                            </td>

                                        </tr>
                                        {/volist}
                                        </tbody>
                                    </table>
                                </div>
                                <footer class="panel-footer">
                                    <a href="javascript:;" class="js_add_area"><i
                                            class="fa fa-map-marker text-muted m-r-xs"></i>指定地区城市设置运费</a>
                                </footer>
                            </div>
                            {/volist}
                        </div>

                    </div>

                </div>
            </section>
        </section>

        <footer class="footer bg-white b-t p-t">
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-1">
                    <input name="sf_id" type="hidden" value="{$row.sf_id|intval}">
                    <button type="submit" class="btn btn-primary js_save_submit" data-loading-text="保存中...">保存
                    </button>
                    <button type="button" class="btn btn-default" data-toggle="back">取消</button>
                </div>
            </div>
        </footer>
    </section>
</form>

{/block}
{block name="footer"}
{literal}
 <script type="text/html" id="delivery_setting_tpl">
        <div class="panel panel-default" id="delivery_item_{{delivery}}" data-delivery="{{delivery}}">
            <header class="panel-heading">{{name}}运费设置 </header>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="col-sm-4">配送区域
                            </th>
                            <th>首{{valuation.name}}({{valuation.unit}})</th>
                            <th>运费(元)</th>
                            <th>续{{valuation.name}}({{valuation.unit}})</th>
                            <th>运费(元)</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>全国默认地区<input type="hidden" name="{{delivery}}[0][area]" value="all"></td>
                            {{include 'edit_fee_tpl' normal}}
                        </tr>

                    </tbody>
                </table>
            </div>
            <footer class="panel-footer">
                <a href="javascript:;" class="js_add_area"><i class="fa fa-map-marker text-muted m-r-xs"></i>指定地区城市设置运费</a>
            </footer>
        </div>
    </script>
    <script type="text/html" id="delivery_area_tpl">
        <tr>
            <td>指定地区 <a href="javascript:;" title="编辑运送区域" class="js_edit_area m-r-xs"  data-remote="sel_region"  data-fun="open_region" data-delivery="{{normal.delivery}}" data-index="{{normal.index}}" data-toggle="divModal" ><i class="fa fa-edit text-muted"></i></a><a href="javascript:;" title="删除运送区域" data-toggle="removeRow"><i class="fa fa-trash-o text-muted"></i></a>
                <p class="  js_area_item_{{normal.delivery}}_{{normal.index}}">{{#area}}</p>
				<input type="hidden" name="{{normal.delivery}}[{{normal.index}}][region_id]" class="select_region_{{normal.delivery}}" id="{{normal.delivery}}_{{normal.index}}_region_id" value="" />
				<input type="hidden" name="{{normal.delivery}}[{{normal.index}}][region_list]" class="select_region_{{normal.delivery}}" id="{{normal.delivery}}_{{normal.index}}_region_list" value="" />
            </td>
            {{include 'edit_fee_tpl' normal}}
        </tr>
    </script>

    <script type="text/html" id="edit_fee_tpl">
        <td style="position:relative;">
            <input type="text" class="form-control" data-rule-required="true" min="1" {{if valid=="positiveInteger"}} data-rule-positiveInteger="true"{{else}}data-rule-decimal="2"{{/if}} name="{{delivery}}[{{index}}][start]" /></td>
        <td style="position:relative;">
            <input type="text" class="form-control" data-rule-required="true" data-rule-decimal="2" name="{{delivery}}[{{index}}][postage]" />
        </td>
        <td style="position:relative;">
            <input type="text" class="form-control" data-rule-required="true" min="1" {{if valid=="positiveInteger"}} data-rule-positiveInteger="true"{{else}}data-rule-decimal="2"{{/if}} name="{{delivery}}[{{index}}][plus]" />
        </td>
        <td style="position:relative;">
            <input type="text" class="form-control" data-rule-required="true" data-rule-decimal="2" name="{{delivery}}[{{index}}][postageplus]" />
        </td>
    </script>
{/literal}
    <script type="text/html" id="sel_region">
        {include file="sys_admin/shipping_tpl/selRegion" /}
    </script>

<script type="text/javascript">
   seajs.use("dist/system/init.js");
   var n_delivery = '',n_index = 0;
   function open_region(obj){
	  n_delivery = obj.delivery;
	  n_index = obj.index;
	  var region_id = $('#'+n_delivery+'_'+n_index+'_region_id').val();
	  if (region_id) region_id=region_id.split(",");

	  var select_region = [];
	  $(".select_region_"+n_delivery).each(function(){
		  select_region.push($(this).val());
	  })
	  if (select_region){
	  	   select_region = select_region.join(",");
		   select_region = select_region.split(",");
	  }
	  var pid = 0;
	  $("input[name=sel_region]").each(function(){
		  if (in_array($(this).val(),region_id)){
			  $(this).attr("checked",true);
			  pid = $(this).attr('pid');
			  if (pid > 0) changeCheck(this,3);
		  }
		  else if(in_array($(this).val(),select_region)){
			  $(this).attr("disabled",true);
		  }
	  })
   }
   function in_array(_search,array){
		for(var i in array){
			if(array[i]==_search) return true;
		}
		return false;
	}
   //点击选择事件方法
   function changeCheck(obj,type){
	   var i = 0,checked_num=0,checked_all=0,element,cities;
	   if (type == 1){
		   var provinces = $(obj).parents(".pop-area-row");
		    if ($(obj).attr("checked")){
			    provinces.find('input').each(function(){
					if ($(this).attr("disabled") !== 'disabled')  $(this).attr("checked",true);
				})
		   }else{
			    provinces.find('input').attr("checked",false);
		   }
		    $(provinces).find(".pop-area-cities").each(function(){
				element = $('.pop-area-cities-count').eq($('.pop-area-cities').index(this));
				checked_num = $(this).find('input:checked').length;
				checked_all = $(this).find('input').length;
				(checked_num > 0) ? element.html('('+checked_num+')'):element.html('');
			})
		   return false;
	   }else if (type == 2){
		   var province = $(obj).parents(".pop-area-province");
		   i = $(".pop-area-province").index(province);
		   cities = $(".pop-area-cities").eq(i);
		   cities.find('input').attr("checked",false);
		   if ($(obj).attr("checked")){
				cities.find('input').each(function(){
					if ($(this).attr("disabled") !== 'disabled')  $(this).attr("checked",true);
				})
		   }
	   }else if (type == 3){
		   cities = $(obj).parents(".pop-area-cities");
		   i = $(".pop-area-cities").index(cities);
	   }
	   element = $('.pop-area-cities-count').eq(i);
	   checked_num = $(cities).find('input:checked').length;
	   checked_all = $(cities).find('input').length;
	   (checked_num > 0) ? element.html('('+checked_num+')'):element.html('');
	   if (checked_all == checked_num){
		  $('.pop-area-province').eq(i).find('input').attr("checked",true);
	   }else{
		  $('.pop-area-province').eq(i).find('input').attr("checked",false);
	   }

   }
   //显示城市
   function toggleProvince(obj){
	  var i = $('.pop-area-province-arrow').index(obj);
	  var element = $('.pop-area-cities').eq(i);
	  var caret = $('.caret').eq(i);
	   $('.caret').removeClass('caret-2');
	  if (element.is(":visible")){
			element.hide();
	  }else{
		 $('.pop-area-cities').hide();
		 caret.addClass('caret-2');
		 element.show();
	  }
   }
   function edit_sel_region(){
	   var region_id = [],sel_num = {},sel_region = [];
	   var pid = 0,id=0;
		$("input[name='sel_region']:checked").each(function(){
			pid = $(this).attr('pid');
			id = $(this).val()
		  	region_id.push(id);
			if (pid > 0){
				if (typeof(sel_num[pid]) == 'undefined') sel_num[pid]=0;
				sel_num[pid] += 1;
			}
		});
		region_id = region_id.join(',');
		$('#'+n_delivery+'_'+n_index+'_region_id').val(region_id);
		 $.each(sel_num,function(key,val){
			 sel_region.push($('#region_name_'+key).html()+'('+val+')');
		})
		sel_region.reverse();
		sel_region = sel_region.join(',');
		$('.js_area_item_'+n_delivery+'_'+n_index).html(sel_region);
		$('#'+n_delivery+'_'+n_index+'_region_list').val(sel_region);
	   return false;
   }
   {lt name="row.sf_id" value="1"}
   //模拟点击
   $(function(){
       setTimeout (function(){
           $("input[name='delivery[]']").trigger("click");
       },500);
   });
   {/lt}
</script>


{/block}